<template>
    <div class="mod-AppCostStatistics">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.query" placeholder="查询条件" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="dataList"
                border
                v-loading="dataListLoading"
                @selection-change="selectionChangeHandle"
                style="width: 100%;">
            <el-table-column
                    type="selection"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>
                <el-table-column
                        prop="statisticsId"
                        header-align="center"
                        align="center"
                        label="统计ID（主键）"
                        v-if="false">
                </el-table-column>
                <el-table-column
                        prop="statisticsPeriodStart"
                        header-align="center"
                        align="center"
                        label="统计时间段开始"
                        >
                </el-table-column>
                <el-table-column
                        prop="statisticsPeriodEnd"
                        header-align="center"
                        align="center"
                        label="统计时间段结束"
                        >
                </el-table-column>
                <el-table-column
                        prop="customerId"
                        header-align="center"
                        align="center"
                        label="客户ID"
                        >
                </el-table-column>
                <el-table-column
                        prop="transportationMethod"
                        header-align="center"
                        align="center"
                        label="运输方式"
                        >
                </el-table-column>
                <el-table-column
                        prop="freightIncome"
                        header-align="center"
                        align="center"
                        label="运费收入"
                        >
                </el-table-column>
                <el-table-column
                        prop="freightExpense"
                        header-align="center"
                        align="center"
                        label="运费支出"
                        >
                </el-table-column>
                <el-table-column
                        prop="createdAt"
                        header-align="center"
                        align="center"
                        label="创建时间"
                        >
                </el-table-column>
                <el-table-column
                        prop="updatedAt"
                        header-align="center"
                        align="center"
                        label="更新时间"
                        >
                </el-table-column>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>

<script>
    export default {
      data () {
        return {
          dataForm: {
            query: ''
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false
        }
      },
      components: {
    
      },
      activated () {
        this.getDataList()
      },
      methods: {
            // 获取数据列表
        getDataList () {
          this.dataListLoading = true
          this.$http({
            url: this.$http.adornUrl('/app/cost_statistics/list'),
            method: 'get',
            params: this.$http.adornParams({
              'page': this.pageIndex,
              'limit': this.pageSize,
              'query': this.dataForm.query
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataList = data.page.list
              this.totalPage = data.page.totalCount
            } else {
              this.dataList = []
              this.totalPage = 0
            }
            this.dataListLoading = false
          })
        },
            // 每页数
        sizeChangeHandle (val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
            // 当前页
        currentChangeHandle (val) {
          this.pageIndex = val
          this.getDataList()
        }
      }
    }
</script>